<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./lib/react.development.js"></script>
    <script src="./lib/react-dom.development.js"></script>
    <script src="./lib/babel.min.js"></script>
</head>

<body>
    <div id="root"></div>
    <script type="text/babel">
        /* 
            类组件:
                1- 类组件是通过class定义的
                2- 类组件建议要有返回值
                3- 如果返回的是JSX有且只能是一个根元素
                4- 类的名字即是组件的名字
                5- 使用组件时，只需要将组件名字通过<>进行包裹并要求闭合
                6- 必须要设置render方法
                7- 组件可以使用多次
        */


        const root = ReactDOM.createRoot(document.querySelector("#root"));
        // 1- 定义类组件方式一:直接通过class关键词进行定义
        // class App extends React.Component{
        //     render(){
        //         return (
        //             <div>
        //                 <p>123</p>    
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App/>)
        // 2- 定义类组件方式二：先定义再赋值给常量
        // const App = class extends React.Component{
        //     render(){
        //         return (
        //             <div>
        //                 <p>234</p>
        //             </div>
        //         )
        //     }
        // }
        // root.render(<App/>)

        // 3- 定义类组件方式三
        //     const {Component}=React;
        //     const App = class extends Component{
        //         render(){
        //             return(
        //                 <div>
        //                     345
        //                     </div>
        //             )
        //         }
        //     }
        // root.render((
        //     <>
        //         <App></App>
        //         <App/>
        //         <App/>
        //         <App/>
        //         <App/>
        //     </>
        // ))

        // 组件可以嵌套其它组件---》组合组件
        // 以下程序：可以称App组件是Child组件的父组件
        // 以下程序：可以称Child组件是App组件的子组件
            const {Component}=React;
            const App=class extends Component{
                render(){
                    return(
                        <div>
                            <h3>App组件</h3>
                            <Child/>
                        </div>
                    )
                }
            }

            const Child = class extends Component{
                render() {
                    return(
                        <div>
                            <h3>Child组件</h3>
                        </div>
                    )
                }
            }
            root.render((
                <>
                    <App/>
                    <Child/>
                </>
            ))
    </script>
</body>

</html>